<template>
  <div>
    <nav-bar title="修改密码"></nav-bar>
    <div class="userBox">
      <div class="logoBox">
        <img class="logo" src="../../../../assets/images/logo.png" alt="">
      </div>
      <input-icon type="password" maxlength="15" icon="password" placeholder="输入旧密码" v-model="oldPwd"></input-icon>
      <input-icon maxlength="15" :type="type" icon="password" placeholder="输入新密码" :iconRight="iconRight" v-model="pwd" @updateIcon="updateIcon"></input-icon>
      <input-icon type="password" icon="password" placeholder="确认新密码" v-model="rePwd"></input-icon>
      <van-button :class="oldPwd === '' || pwd === '' || rePwd === '' ? 'van-buttons' : 'van-button'" class="userBoxBth" round block type="info" native-type="submit" @click="onSubmit">
        确认
      </van-button>
    </div>
  </div>
</template>

<script>
  import userApi from '../../../../api/userAPI.js'
  import inputIcon from '../../../../components/InputIcon.vue'
  export default {
    components:{
      inputIcon
    },
    data() {
        return {
          type: 'password',
          iconRight: 'eyeOpen',
          pwd: '',
          rePwd:　'',
          oldPwd: ''
        }
      },
      methods: {
        // 点击眼睛icon改变明文密文
        updateIcon(iconType) {
          this.pwd = this.pwd
          if (iconType === 'eyeOpen') {
            this.type = 'text'
            this.iconRight = 'eyeClose'
          } else {
            this.type = 'password'
            this.iconRight = 'eyeOpen'
          }
        },
        // 提交表单
        onSubmit() {
          if (this.oldPwd === '') {
            this.$toast.fail('旧密码不能为空');
            return
          }
          if (this.pwd === '') {
            this.$toast.fail('新密码不能为空');
            return
          }
          if (this.rePwd === '') {
            this.$toast.fail('新密码确认不能为空');
            return
          }
         if (!(/^[A-Za-z0-9]{6,15}$/.test(this.pwd))) {
           this.$toast.fail('请输入6-15位数字或字母');
           return
         }
          if (!(/^[A-Za-z0-9]{6,15}$/.test(this.oldPwd))) {
            this.$toast.fail('请输入6-15位数字或字母');
            return
          }
          if (this.rePwd !== this.pwd) {
            this.$toast.fail('两次密码不一致');
            return
          }
          userApi.updatePwd(this.oldPwd, this.pwd).then(res => {
            this.$dialog.alert({
              message: '密码修改成功，请退出重新登录',
            }).then(() => {
              this.$router.push({
                path: '/'
              })
            });
          })
        },
      }
  }
</script>
<style scoped lang="scss">
.navBar{
  border-bottom: 0.0625rem solid #E5E5E5;
}
</style>
